<template>
  <div class="report-box">
    <Header title="上报"></Header>
    <div class="report-content">
      <div class="report-type">
        <span>投诉类型:</span>
        <van-radio-group v-model="radio">
          <van-radio name="1" checked-color="#DD5858" icon-size="16">不文明行为</van-radio>
          <van-radio name="2" checked-color="#DD5858" icon-size="16">欺客宰客</van-radio>
        </van-radio-group>
      </div>
      <van-field
        v-model="object"
        label="投诉对象:"
        placeholder="请输入被诉方（以合同或发票盖章单位为准）"
        :border="false"
      />
      <van-field
        v-model="message"
        rows="5"
        autosize
        label="投诉原因:"
        type="textarea"
        maxlength="500"
        placeholder="请填写投诉事由（最多500字）"
        show-word-limit
        :border="false"
      />
      <div class="report-upload">
        <span>上传证据:</span>
        <van-uploader v-model="fileList" multiple :after-read="afterRead" />
      </div>
      <van-field
        v-model="nickname"
        label="联系人:"
        placeholder="请输入您的昵称"
        :border="false"
      />
      <van-field
        v-model="tel"
        label="联系方式:"
        placeholder="请输入您的联系方式"
        :border="false"
      />
      <div class="submit-box">
        <button>提交</button>
      </div>
    </div>
    <Nav></Nav>
  </div>
</template>

<script>
import Header from '@/components/Header/Header.vue'
import Nav from '@/components/Nav/Nav.vue'
export default {
  name:'report',
  components:{Header,Nav},
  data(){
    return{
      radio: '1',
      object:'',
      message:'',
      fileList: [],
      nickname:'',
      tel:''
    }
  },
    methods:{
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
    }
  }
}
</script>

<style lang="less" scoped>
.report-box{
  min-height: 100vh;
  padding:88/7.5vw 0 98/7.5vw;
}
.report-content{
  margin:20/7.5vw 0;
  
  .report-type{
    display: flex;
    align-items: center;
    height: 98/7.5vw;
    padding:0 20/7.5vw;
    border-bottom:1px solid #F2F2F2;
    font-size:32/7.5vw;
    background-color: #fff;
  }
  .report-upload{
    display: flex;
    flex-direction: column;
    padding:0 20/7.5vw;
    border-bottom:1px solid #F2F2F2;
    line-height: 72/7.5vw;
    font-size:32/7.5vw;
    background-color: #fff;
  }
  .submit-box{
    text-align: center;
    background: #fff;
    button{
      width: 690/7.5vw;
      height: 80/7.5vw;
      margin: 50/7.5vw 0;
      background-color: #0FD2B2;
      border-radius: 40/7.5vw;
      font-size: 36/7.5vw;
      color: #fff;
    }
  }
}

</style>